<template>
  <div>
    <h1 ref="hello">hello</h1>
    <Count ref="CountComp" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
import Count from '@/components/Count/index.vue';
import { onMounted, ref } from 'vue';

/* 
  如何在setup中拿到ref代表的DOM
  1.新建一个响应式数据（一定要在setup最外层新建），名称和对应的ref名称保持一致
  2.这个ref对象的value属性就保存了当前的DOM
*/

const hello = ref();
onMounted(() => {
  console.log(hello.value);
  hello.value.style.color = 'pink';
});

// 如果ref设置给了组件上，则ref响应式数据保存的是子组件的组件实例
const CountComp = ref();
onMounted(() => {
  console.log(CountComp.value.a, '1');
});
</script>

<style lang="scss"></style>
